<template>
  <section>
    <div class="app-container calendar-list-container">
      <el-dialog :title="title" :visible.sync="dialogVisible" :width="width" :modal="modal">
        <dialogSearch v-if="queryList.length>0" :list="queryList" :queryEntity="queryEntity" width="45%"></dialogSearch>
        <buttons :showQuery="true" @query="doQuery"> </buttons>
        <grid :columns="columns" :multi="multi" :url="url" ref="GridDialog" :loading="true" :height="height" :pagination="pagination" :queryEntity="queryEntity" :pageSize="10">
        </grid>
        <span slot="footer" class="dialog-footer" v-if="showBtn">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="selectData">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </section>
</template>

<script>

//import grid from '@/components/Grid'
//import dialogSearch from '@/components/DialogSearch'
import { Message, MessageBox } from 'element-ui'
import buttons from '@/components/Buttons'

export default {
  name: 'gridDialog',
  components: { grid: () => import('@/components/Grid'), buttons, dialogSearch: () => import('@/components/Search') },
  data () {
    return {
      dialogVisible: false
    }
  },
  props: {
    url: {
      type: String,
      default: function () {
        return null
      }
    },
    multi: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    modal: {
      type: Boolean,
      default: function () {
        return true
      }
    },
    pagination: {
      type: Boolean,
      default: function () {
        return true
      }
    },
    queryList: {
      type: Array,
      default: function () {
        return []
      }
    },
    queryEntity: {
      type: Object,
      default: function () {
        return {}
      }
    },
    title: {
      type: String,
      default: function () {
        return '查询框'
      }
    },
    width: {
      type: String,
      default: function () {
        return '80%'
      }
    },
    height: {
      type: String,
      default: function () {
        return ':4'
      }
    },
    selectSize: {
      type: Number,
      default: function () {
        return 0
      }
    },
    showBtn: {
      type: Boolean,
      default: function () {
        return true
      }
    },
    columns: {
      type: Array
    }
  },
  created () {
  },
  computed: {},
  methods: {
    setUrl (url) {
      this.url = url
    },
    show (queryEntity) {
      this.dialogVisible = true
      this.doQuery('', queryEntity)
    },
    doQuery (text, queryEntity) {
      if (!queryEntity) {
        queryEntity = this.queryEntity
      } else {
        this.queryEntity = queryEntity
      }
      this.$refs['GridDialog'].doQuery(text, queryEntity)
    },
    selectData () {
      let rows = [];
      if (this.multi) {
        rows = this.$refs['GridDialog'].getCurrentRows()
        if (rows.length != this.selectSize && this.selectSize != 0) {
          MessageBox.alert("请选择" + this.selectSize + "条数据")
          return
        }
      } else {
        rows.push(this.$refs['GridDialog'].getCurrentRow())
      }
      if (rows && rows.length > 0) {
        this.dialogVisible = false
        if (this.multi) {
          this.$emit('select', rows)
        } else {
          this.$emit('select', rows[0])
        }
      } else {
        MessageBox.alert("请选择数据");
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
